<template>
  <div class="page-container">
    <!-- 搜索栏 -->
    <div class="search-container">
      <el-form :model="searchParams" inline size="medium">
        <el-form-item label="企业名称:" prop="name">
          <el-input v-model="searchParams.name" placeholder="请输入企业名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearchEnterprise">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加企业按钮 -->
    <div class="add-enterprise">
      <el-button v-auth-btn="'park:enterprise:add_edit'" type="primary" size="medium" @click="$router.push(`enterprise/editor?mode=add`)">添加企业</el-button>
    </div>
    <!-- 企业数据列表 -->
    <el-table :data="enterpriseList" :header-cell-style="{ background: '#f7f8f9' }">
      <!-- 折叠租赁合同信息列表 -->
      <el-table-column width="80" type="expand">
        <template #default="props">
          <el-table :data="props.row.rentList" border :header-cell-style="{ background: '#f7f8f9', color: '#333', fontWeight: 'bold' }" class="rent-table">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column label="租赁楼宇" prop="buildingName" />
            <el-table-column label="合同状态">
              <template #default="{ row }">
                {{ statusObj[row.status] }}
              </template>
            </el-table-column>
            <el-table-column label="租赁起止时间" width="200">
              <template #default="{ row }">
                {{ `${row.startTime} 至 ${row.endTime}` }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="{ row }">
                <el-button v-auth-btn="'park:rent:add_surrender'" :disabled="!row.renewFlag" type="text" size="medium" @click="onOpenAddRent(props.row.id, row)">续租</el-button>
                <el-button v-auth-btn="'park:rent:add_surrender'" :disabled="!row.exitFlag" type="text" size="medium" @click="onOutRent(row.id)">退租</el-button>
                <el-button v-auth-btn="'park:rent:remove'" :disabled="row.status !== 3" type="text" size="medium" @click="onDeleteRent(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!-- 序号 -->
      <el-table-column label="序号" type="index" width="80" />
      <!-- 企业名称 -->
      <el-table-column label="企业名称" prop="name" />
      <!-- 联系人 -->
      <el-table-column label="联系人" prop="contact" />
      <!-- 联系电话 -->
      <el-table-column label="联系电话" prop="contactNumber" />
      <!-- 操作 -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button v-auth-btn="'park:rent:add_surrender'" type="text" @click="onOpenAddRent(row.id, {})">添加合同</el-button>
          <el-button v-auth-btn="'park:enterprise:query'" type="text" @click="$router.push(`enterprise/details/${row.id}`)">查看</el-button>
          <el-button v-auth-btn="'park:enterprise:add_edit'" type="text" @click="$router.push(`enterprise/editor?mode=edit&id=${row.id}`)">编辑</el-button>
          <el-button v-auth-btn="'	park:enterprise:remove'" type="text" :disabled="isDisabledDelete(row)" @click="onDeleteEnterprise(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      :current-page.sync="searchParams.page"
      :page-size="10"
      layout="->, total, prev, pager, next"
      :total="total"
      @current-change="getEnterpriseList"
    />
    <!-- 添加租赁合同弹窗 -->
    <AddRent ref="addRentRef" @update-list="getEnterpriseList" />
  </div>
</template>

<script>
import { getEnterpriseListAPI, deleteEnterpriseAPI, getEnterpriseRentListAPI, outRentAPI, deleteEnterpriseRentAPI } from '@/api/park/enterprise'
import AddRent from './components/AddRent.vue'

export default {
  name: 'Building',
  components: {
    AddRent
  },
  data() {
    return {
      // 查询参数
      searchParams: {
        page: 1,
        pageSize: 10,
        name: ''
      },
      // 企业列表
      enterpriseList: [],
      // 企业列表数据总条数
      total: 0,
      // 收费类型列表
      chargeTypeObj: {
        card: '月卡',
        temp: '临时车'
      },
      // 缴纳状态列表
      paymentStatusObj: {
        0: '未缴纳',
        1: '已缴纳'
      },
      // 缴纳方式列表
      paymentMethodObj: {
        WeChat: '微信',
        Alipay: '支付宝',
        Cash: '线下'
      },
      // 合同的租赁状态
      statusObj: {
        0: '待生效',
        1: '生效中',
        2: '已到期',
        3: '已退租'
      }
    }
  },
  created() {
    // 获取企业列表
    this.getEnterpriseList()
  },
  methods: {
    // 获取企业列表
    async getEnterpriseList() {
      const res = await getEnterpriseListAPI(this.searchParams)
      const enterprisePromises = res.rows.map(async item => (
        {
          ...item,
          rentList: await getEnterpriseRentListAPI(item.id) // 租赁列表
        }
      ))
      this.enterpriseList = await Promise.all(enterprisePromises)
      this.total = res.total
    },
    // 获取企业列表第一页
    onSearchEnterprise() {
      this.searchParams.page = 1
      this.getEnterpriseList()
    },
    // 删除企业
    onDeleteEnterprise(id) {
      this.$confirm('您确定删除该企业吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteEnterpriseAPI(id)
        this.$message.success('删除成功')
        // 刷新企业列表
        this.getEnterpriseList()
      }).catch(() => {
        // console.log('已取消删除')
      })
    },
    // 退租
    async onOutRent(id) {
      this.$confirm('您确定要退租吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await outRentAPI(id)
        this.$message({
          type: 'success',
          message: '退租成功'
        })
        // 刷新企业列表
        this.getEnterpriseList()
      })
    },
    isDisabledDelete(row) {
      return row.rentList.some(item => {
        return item.status === 0 || item.status === 1
      })
    },
    // 删除合同
    async onDeleteRent(id) {
      this.$confirm('您确定要删除该合同吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteEnterpriseRentAPI(id)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        // 刷新企业列表
        this.getEnterpriseList()
      })
    },
    // 打开添加租赁合同弹窗
    onOpenAddRent(enterpriseId, row) {
      this.$refs.addRentRef.open(enterpriseId, row)
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .search-container {
    border-bottom: 1px solid #eee;
    .el-form {
      .el-form-item {
        margin-right: 40px;
      }
    }
  }
  .add-enterprise {
    margin-top: 25px;
  }
  ::v-deep .el-table {
    margin: 25px 0;
    .el-icon-plus {
      border: 1px solid #eee;
    }
    .el-table__expanded-cell {
      padding-left: 60px;
    }
  }
}
</style>
